<template>
  <div>
    <el-container>
      <!--   收缩起来的侧边栏   -->
      <div :class="{show:show}" class="rightPanel-container" v-if="!showSiderbar">
        <div class="rightPanel-background" />
        <div class="rightPanel">
          <div class="handle-button" :style="{'top':'200px','background-color':theme}" @click="show=!show">
            <i :class="show?'el-icon-close':'el-icon-menu'" />
          </div>
          <div class="rightPanel-items">
            <div class="modules">
              <div v-for="(item,index) in moduleList" :key="index">
                <p class="fs-14 mb-15"><b>{{item.group}}</b></p>
                <div class="module-box">
                  <module-entry class="module" v-for="module in item.modules" :key="module.name" :module="module"></module-entry>
                </div>
              </div>
            </div>
            <el-divider></el-divider>
            <user-info class="mt-16"></user-info>
          </div>
        </div>
      </div>
      <!--   平铺展示的侧边栏   -->
      <el-aside width="360px" class="slider ml-16" v-if="showSiderbar">
        <div class="modules">
          <div v-for="(item,index) in moduleList" :key="index">
            <p class="fs-14 mb-15"><b>{{item.group}}</b></p>
            <div class="module-box">
              <module-entry class="module" v-for="module in item.modules" :key="module.name" :module="module"></module-entry>
            </div>
          </div>
        </div>
        <user-info class="mt-16"></user-info>
      </el-aside>
      <el-main class="modules-main" :style="{'margin-left': (showSiderbar ? '16px':'45px')}">
        <router-view/>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import ModuleEntry from '@/components/ModuleEntry';
import UserInfo from '@/components/UserInfo';
export default {
  name: 'RightPanel',
  components: { UserInfo, ModuleEntry },
  data () {
    return {
      moduleList: [], // 模块
      show: false,
      screenWidth: document.body.clientWidth,
      showSiderbar: true
    }
  },
  computed: {
    theme () { // 获取主题颜色
      return this.$store.state.themeColor
    }
  },
  watch: {
    show (value) { // 收起侧边栏的展示隐藏
      if (value && !this.clickNotClose) {
        this.addEventClick()
      }
      if (value) {
        this.$methods.addClass(document.body, 'showRightPanel')
      } else {
        this.$methods.removeClass(document.body, 'showRightPanel')
      }
    },
    // 监听浏览器窗口宽度变化
    screenWidth (newVal) {
      this.screenWidth = newVal
      this.screenWidth > 1560 ? this.showSiderbar = true : this.showSiderbar = false;
      // 当浏览器尺寸大于1580时 侧边栏平铺展示，反之则做收缩展示
    }
  },
  mounted () {
    this.getModules()
    this.onWindowResize();
  },
  methods: {
    getModules () { // 获取模块
      let paramModule = {
        orgId: 1,
        navId: 1
      };
      this.$api.getModules(paramModule).then(res => {
        this.moduleList = res
      });
    },
    addEventClick () {
      window.addEventListener('click', this.closeSidebar)
    },
    onWindowResize () { // 监听窗口大小变化
      this.screenWidth = document.body.clientWidth;
      this.screenWidth > 1560 ? this.showSiderbar = true : this.showSiderbar = false;
      window.onresize = () => {
        return (() => {
          window.screenWidth = document.body.clientWidth;
          this.screenWidth = window.screenWidth
        })()
      };
    },
    closeSidebar (evt) { // 收缩侧边栏的关闭
      const parent = evt.target.closest('.rightPanel')
      if (!parent) {
        this.show = false
        window.removeEventListener('click', this.closeSidebar)
      }
    }
  }
}
</script>

<style>
  .showRightPanel {
    overflow-y: scroll;
    position: relative;
    width: calc(100%);
  }
</style>

<style lang="scss" scoped>
  .rightPanel-background {
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
    background: rgba(0, 0, 0, .2);
    z-index: -1;
  }

  .rightPanel {
    width: 100%;
    max-width: 360px;
    height: 100vh;
    position: absolute;
    top: 180px;
    left: 0;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
    transition: all .25s cubic-bezier(.7, .3, .1, 1);
    transform: translate(-100%);
    background: #fff;
    z-index: 40000;
  }

  .show {
    transition: all .3s cubic-bezier(.7, .3, .1, 1);

    .rightPanel-background {
      z-index: 20000;
      opacity: 1;
      width: 100%;
      height: 100vh;
      position: absolute;
      top: 180px;
      /*padding-bottom: 90px;*/
    }

    .rightPanel {
      transform: translate(0);
    }
  }

  .handle-button {
    width: 35px;
    height: 35px;
    position: absolute;
    left: 360px;
    text-align: center;
    font-size: 24px;
    border-radius: 0 6px 6px 0 !important;
    z-index: 0;
    pointer-events: auto;
    cursor: pointer;
    color: #fff;
    line-height: 35px;

    i {
      font-size: 24px;
      line-height: 35px;
    }
  }

  .modules {
    width: 340px;
    background: rgba(255, 255, 255, 1);
    border-radius: 10px;
    padding: 20px 10px 30px 10px;
    padding-bottom: 0;

    .module-box {
      padding: 0 16px 0 16px;

      .module {
        margin: 0px 32px 22px 0;
      }

      .module:nth-child(4n) {
        margin-right: 0;
      }
    }
  }

  .modules-main {
    border-radius: 10px;
    background-color: #fff;
    margin: 0 16px;
    min-width: 1145px;
  }
</style>
